<template>
  <div>
    <div
      class="item"
      :class="props.data.isDirectory ? 'folder' : 'file'"
      @click.stop="handleClick"
    >
      <div class="cover">
        <el-image
          :src="cover"
          lazy
          fit="scale-down"
          :preview-src-list="fileType == 'IMAGE' ? finderImages : []"
          :initial-index="previewIndex"
          @error="handleCover"
          close-on-press-escape
          hide-on-click-modal
        >
          <template #placeholder>
            <div class="image-placeholder">Loading<span class="dot">...</span></div>
          </template>
          <template #error>
            <div class="image-placeholder">Loading<span class="dot">...</span></div>
          </template>
        </el-image>
      </div>
      <div class="title">
        <el-tooltip :content="props.data.name" placement="bottom">
          <div v-if="proccessData.proccess < 100">
            <el-progress
              :text-inside="true"
              :stroke-width="28"
              :percentage="proccessData.proccess"
            >
              <div>{{ proccessData.current }} / {{ proccessData.total }}</div>
              <div>{{ proccessData.proccess }}%</div>
            </el-progress>
          </div>
          <div v-else>{{ props.data.name }}</div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useCommonStore } from "@/store/modules/common";
import { ref, onUnmounted, onMounted } from "vue";
import nasFileService from "@/api-services/apis/nasFile";
import bus from "vue3-eventbus";
import eventKey from "@/const/busEventConstKey";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const fileType = ref("");
const emits = defineEmits(["onClick", "update:fileType"]);
const commonStore = useCommonStore();
const { finderImages } = storeToRefs(commonStore); //使用storeToRefs函数将state里的数据解构出来实现响应式
const proccessData = ref<any>({
  current: 10,
  total: 110,
  proccess: 100,
});
onMounted(() => {
  // console.log("加载", props.data.physicalPath);
  bus.on(`${eventKey.receiveMessage}:${props.data.physicalPath}`, (data) => {
    proccessData.value = data.data;
  });
});
onUnmounted(() => {
  // console.log("卸载", props.data.physicalPath);
  bus.off(`${eventKey.receiveMessage}:${props.data.physicalPath}`);
});
function handleClick() {
  emits("onClick", { fileType: fileType.value, ...props.data });
}
const imgSufix = ["jpg", "bmp", "png", "gif", "webp", "ico"];
const videoSufix = ["mp4", "mkv", "avi", "webm"];
const cover = ref("");
const loading = ref(true);
const sufix = ref(props.data.isDirectory ? "" : props.data.name.split(".").pop());
const previewIndex = ref(0);
// watch(
//   () => props.data.event,
//   (eventName) => {
//     console.log(eventName);
//     switch (eventName) {
//       case "RENAME":
//         break;

//       default:
//         break;
//     }
//   }
// );

async function handleCover() {
  if (props.data.isDirectory) {
    cover.value = "/styles/images/fileIcon/folder.png";
    fileType.value = "DIR";
  } else if (imgSufix.indexOf(sufix.value) > -1) {
    let img = nasFileService.FileLink(props.data.physicalPath);
    previewIndex.value = commonStore.addImages(img);
    cover.value = img;
    fileType.value = "IMAGE";
  } else if (videoSufix.indexOf(sufix.value) > -1) {
    cover.value = "/styles/images/fileIcon/video.png";
    fileType.value = "VIDEO";
  } else {
    cover.value = "/styles/images/fileIcon/unknown.png";
    fileType.value = "UNKNOWN";
  }
  loading.value = false;
  //同步更新父级数据
  emits("update:fileType", fileType.value);
}
</script>

<style lang="scss" scoped>
.item {
  width: 100px;
}

.item:hover {
  background: rgb(0 0 0 / 6%);
  border-radius: 10px;
}
.file {
  .cover {
    // padding: 10px;
    box-sizing: border-box;
  }
}
.cover {
  width: 100px;
  height: 100px;
  overflow: hidden;
  ::v-deep(.el-image) {
    width: 100%;
    height: 100%;
  }

  .image-placeholder {
    background: rgb(0 0 0 / 6%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    // background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 14px;
  }
}
.title {
  height: 30px;
  overflow: hidden;
  text-align: center;
  font-size: var(--el-font-size-extra-small);
  word-break: break-all;
  padding: 0 4px;
}

// .image-slot {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   width: 100%;
//   height: 100%;
//   background: var(--el-fill-color-light);
//   color: var(--el-text-color-secondary);
//   font-size: 30px;
// }
// .image-slot .el-icon {
//   font-size: 30px;
// }
</style>
